<template>
    <div id="testEditor">
        <div ref="toolbar" class="toolbar"></div>
        <div ref="editor" class="deitor"></div>
        <!--清空面板-->
        <button @click="cleanEditorMain">clean</button>
        <!--获取html内容-->
        <button @click="getHtml">getHtml</button>
        <!--获取text内容-->
        <button @click="getText">getText</button>

        <p>{{text}}</p>
        <p>{{html}}</p>

    </div>

</template>

<script>
    import E from 'wangeditor'

    export default {
        name: "TestEditor",
        data() {
            return {
                editormain: null,
                textAreaMain: null,
                text: '',
                html: ''
            }
        },
        methods: {
            createEditor() {
                this.editormain = new E(this.$refs.toolbar, this.$refs.editor);
                this.editormain.customConfig.zIndex = 50
                //修改菜单栏
                this.editMenus(this.editormain)
                this.editLang(this.editormain)
                this.editormain.create();
                this.editormain.txt.html('<p>输入内容...</p>');

            },
            editMenus(editormain) {
                editormain.customConfig.menus = [
                    'head',  // 标题
                    'bold',  // 粗体
                    'fontSize',  // 字号
                    'fontName',  // 字体
                    'italic',  // 斜体
                    'underline',  // 下划线
                    'strikeThrough',  // 删除线
                    'foreColor',  // 文字颜色
                    'backColor',  // 背景颜色
                    'link',  // 插入链接
                    'list',  // 列表
                    'justify',  // 对齐方式
                    'quote',  // 引用
                    'image',  // 插入图片
                    'table',  // 表格
                    'code',  // 插入代码
                    'undo',  // 撤销
                    'redo'  // 重复
                ]
            },
            editLang(editormain) {
                editormain.customConfig.lang = {
                    // '设置标题':'title',
                    '撤销': 'undo'
                }


            },
            cleanEditorMain() {
                this.editormain.txt.clear();
            },
            getHtml() {
                this.html = this.editormain.txt.html();
            },
            getText() {
                this.text = this.editormain.txt.text();
            }
        },
        mounted() {
            this.createEditor()
        }
    }
</script>

<style scoped>
    .toolbar {
        border: 1px solid #42b983;
    }

    .deitor {
        border: 1px solid #42b983;
        height: 400px;
    }

    .w-e-toolbar {
        justify-content: center;
    }
</style>